<template>
  <div>
    <div>
      <h1>号卡管理</h1>
    </div>
    <epm-manager-layout class="app-manager">

      <template v-slot:main style="padding: 0;">
        <epm-search-layout style="padding: 0;">
          <template v-slot:left>
            <el-button type="primary" @click="$router.push('/AddCardNo')">+&nbsp;新增卡号</el-button>
            <el-button type="success" :disabled="tableData.length===0" @click="exportTable">导出</el-button>
          </template>
          <template v-slot:right>
            <div class="template-advanced-query">
              <dl class="template-advanced-query__explicit">
                <dt>号卡状态：</dt>
                <dd>
                  <el-select v-model="queryParam.noCardState" clearable placeholder="请选择" @change="doQuery">
                    <el-option v-for="{code,name} in noCardState" :label="name" :value="code"
                               :key="code"></el-option>
                  </el-select>
                </dd>
                <dt>靓号类型：</dt>
                <dd>
                  <el-select v-model="queryParam.aaaaNoTypeId" clearable placeholder="请选择" @change="doQuery">
                    <el-option v-for="{id,aaaaNoTypeName} in aaaaNoTypeList" :label="aaaaNoTypeName" :value="id"
                               :key="id"></el-option>
                  </el-select>
                </dd>
                <dd>
                  <el-input placeholder="请输入卡号或开卡人" v-model="queryParam.cardNoOrCardOpener"
                            @keyup.enter.native="doQuery">
                    <i slot="prefix" class="el-input__icon el-icon-search" @click="doQuery"/>
                  </el-input>
                </dd>

              </dl>
            </div>
          </template>
        </epm-search-layout>
        <!-- // 工具栏 -->
        <el-table class="main-table" :data="tableData">
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="cardNo" label="卡号" width="120"></el-table-column>
          <el-table-column prop="operator" label="运营商" width="80">
            <template slot-scope="scope">
              {{ getOperatorName(scope.row.operator) }}
            </template>
          </el-table-column>
          <el-table-column prop="createUserName" label="创建人" width="80"></el-table-column>
          <el-table-column prop="aaaaNoTypeName" label="靓号类型" width="150"></el-table-column>
          <el-table-column prop="packageName" label="最低消费套餐" width="150">
            <template slot-scope="scope">
              {{ !!scope.row.aaaaNoTypeName ? scope.row.aaaaPackageName : scope.row.packageName }}
            </template>
          </el-table-column>
          <el-table-column prop="noCardState" label="号卡状态" width="80">
            <template slot-scope="scope">
              {{ getNoCardStateName(scope.row.noCardState) }}
            </template>
          </el-table-column>
          <el-table-column prop="minPreStorm" label="最低预存" width="80"></el-table-column>
          <el-table-column prop="contractPeriod" label="合约期" width="80"></el-table-column>
          <el-table-column prop="cardOpeningFee" label="开卡费" width="80"></el-table-column>
          <el-table-column prop="openCardPlatUserName" label="开卡人" width="80"></el-table-column>
          <el-table-column prop="orderPackageName" label="开卡套餐" width="140"></el-table-column>
          <el-table-column prop="handleTime" label="办理时间"></el-table-column>
          <el-table-column label="操作" width="60">
            <template slot-scope="scope" v-if="scope.row.noCardState==='NOT_OPENED'">
              <i class="el-icon-delete" disabled="" style="color: #ff3300;cursor: pointer"
                 @click="deleteNoCard(scope.row.id)"></i>
            </template>
          </el-table-column>
        </el-table>
        <simple-pager ref="pager" request-url="/noCard/getList" :tableData.sync="tableData" class="ring_pagination"
                      style=""/>
      </template>
    </epm-manager-layout>
  </div>

</template>

<script>
import {operatorCode, noCardState, getOperatorName, getNoCardStateName} from "@/common/PublicCode";
import SimplePager from "@/components/SimplePager";
import request from "@/utils/Request";
import {downLoad} from "@/utils/DownLoadUtil";
import EventBus from '@/utils/EventBus'

export default {
  name: "NoCardManager",
  components: {SimplePager},
  data() {
    return {
      operatorCode: operatorCode,
      noCardState: noCardState,
      queryParam: {},
      tableData: [],
      aaaaNoTypeList: [],
      getOperatorName: getOperatorName,
      getNoCardStateName: getNoCardStateName
    }
  },
  mounted() {
    this.initAAAANoTypeList();
    EventBus.$on('saveCardNoSuccess', () => {
      this.doQuery();
    })
  },
  methods: {
    async exportTable() {
      const confirm = await this.$confirm('是否确认导出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return true;
      }).catch(() => {
        return false;
      });
      if (!confirm) {
        return;
      }
      this.$message("正在导出，请稍后...");
      downLoad.bind(this);
      downLoad("/noCard/exportNoCardList", this.queryParam)
    },
    async deleteNoCard(id) {
      const confirm = await this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return true;
      }).catch(() => {
        return false;
      });
      if (!confirm) {
        return;
      }
      request.get('/noCard/delete', {params: {id}}).then(({data}) => {
        if (data.success) {
          this.doQuery();
          this.$message({type: 'success', message: "删除号卡成功"});
        } else {
          this.$message({type: 'warning', message: `无法删除，${data.message}`});
        }
      }).catch(err => {
        this.$message({type: 'error', message: "删除号卡失败"});
        console.log(err)
      })
    },
    doQuery() {
      this.$refs.pager.doQuery(this.queryParam);
    },
    initAAAANoTypeList() {
      request.get('/AAAANoType/getList').then(({data}) => {
        if (data.success) {
          this.aaaaNoTypeList = data.data;
          this.aaaaNoTypeList.unshift({id: '-1', aaaaNoTypeName: '无'})
        }
      }).catch(err => {
        this.$message({type: 'error', message: "查询靓号类型列表失败"});
        console.log(err)
      })
    },
  }
}
</script>

<style scoped>
.app-manager {
  background: #fff;
  padding: 20px 0;
  margin-top: 20px;
  min-height: 500px;
  position: relative;
}

.main-table {
  width: 100%;
}

.ring_pagination {
  position: absolute;
  bottom: 0;
  width: -webkit-calc(100% - 40px);
  width: -moz-calc(100% - 40px);
  width: calc(100% - 40px);
}
</style>